{% extends "layout.html" %}
{% block content %}

<div class="user-profile">
  {% if not recipe_found %}
    <div class="page-header">
      <h2>What's for Dinner?</h2>
      <h2>Sorry, no dinner recipes were found!</h2>
    </div>
  {% elif takeout_recommendation %}
    <div class="page-header">
      <h2>What's for Dinner?</h2>
      <h2>Dinner Recommendation: Takeout from your favorite restaurant!</h2>
    </div>
  {% else %}
    <div class="page-header">
      <h2>What's for Dinner?... {{ recipe.recipe_title }}</h2>
    </div>

    <div class="row">
      <div class="col-xs-6 col-md-4">
        <div class="panel panel-primary">
          <div class="panel-heading">Description</div>
          <div class="panel-body">{{ recipe.recipe_description }}</div>
        </div>

        <div class="panel panel-primary">
          <div class="panel-heading">Public or Private</div>
          {% if recipe.is_public %}
            <div class="panel-body">Public</div>
          {% else %}
            <div class="panel-body">Private</div>
          {% endif %}
        </div>

        <div class="panel panel-primary">
          <div class="panel-heading">Recipe Type</div>
          <div class="panel-body">{{ recipe.recipe_type }}</div>
        </div>

        <div class="panel panel-primary">
          <div class="panel-heading">Rating (1-worst to 5-best)</div>
          <div class="panel-body">{{ recipe.rating }}</div>
        </div>
      </div>

      <div class=".col-xs-6 .col-md-8">
        {% if recipe.image_url %}
          <img src="{{ recipe.image_url }}" alt="{{ recipe.image_filename }}" style="width:600px;height:450px;">
        {% endif %}
      </div>
    </div>

    <div class="row">
      <div class="col-md-6">
        <div class="panel panel-primary">
          <div class="panel-heading">Ingredients</div>
          <div class="panel-body">
            {{ recipe.ingredients_html | safe }}
          </div>
        </div>
      </div>

      <div class="col-md-6">
        <div class="panel panel-primary">
          <div class="panel-heading">Recipe Steps</div>
          <div class="panel-body">
            {{ recipe.recipe_steps_html | safe }}
          </div>
        </div>
      </div>
    </div>
  {% endif %}

</div>`

{% endblock %}
